<template>
  <el-table :data="articleList" style="width: 100%">
    <el-table-column prop="title" label="title" />
    <el-table-column prop="author" label="author" />
    <el-table-column prop="category.name" label="category" />
    <el-table-column label="operation">
      <template #default="scope">
        <el-button @click="onArticleEditClick(scope.row)">edit</el-button>
        <el-popconfirm title="Are you sure to delete this?" @confirm="onArticleDelClick(scope.row)">
          <template #reference>
            <el-button type="danger"> del</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { postQueryArticle, postDelArticle } from '@/service/api'

const router = useRouter()

onMounted(() => {
  _postQueryArticle()
})

const articleList = ref([])
const _postQueryArticle = () => {
  postQueryArticle().then((res) => {
    articleList.value = res.data
  })
}

const onArticleEditClick = (row: any) => {
  router.push(`/home/editor/${row.uid}`)
}
const onArticleDelClick = (row: any) => {
  const body = { uid: row.uid }
  postDelArticle(body).then(() => {
    _postQueryArticle()
  })
}
</script>
